<template>
  <view class="speech-main">
    <view class="top-title">
      语音输入
    </view>
    <view class="info">
      <uv-textarea v-model="currentText" count :maxlength="maxlength" placeholder="语音文字输入..." height="280rpx" :text-style="{textAlign:'left'}"></uv-textarea>
    </view>
    <view class="bottom">
      <view class="text-btn clear" @click="clear">清空</view>
      <view class="button-view">
        <view :class="{scale:isRecord}" @touchstart="streamRecord" @touchend='endStreamRecord'
              class="button"></view>
        <view class="text">按住说话</view>
      </view>
      <view class="text-btn confirm" @click="confirm">确认</view>
    </view>
  </view>
</template>

<script setup>
import {defineProps, ref, watchEffect} from 'vue'
const props = defineProps({
  maxlength: {
    required: false,
    type: Number,
    default: 200
  }
});

const isRecord = ref(false)
const emit = defineEmits(['getSpeeckInfo'])
let plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()
const currentText = ref('')
const buttonInfo = ref('')

function streamRecord() {
  buttonInfo.value = '正在识别中...'
  isRecord.value = true
  manager.start({
    lang: 'zh_CN',
  })
}

function endStreamRecord() {
  manager.stop()
  isRecord.value = false
  buttonInfo.value = '长按语音识别'
}

function initRecord() {
  manager.onRecognize = (res) => {
    console.log('新内容', res)
    let text = res.result
    //识别的内容
    currentText.value += text
  }
  manager.onStop = (res) => {
    let text = res.result
    if (text == '') {
      uni.showToast({
        title: '没有识别到声音内容',
        duration: 2000,
        icon: 'error'
      })
      return
    }
    //识别的内容
    currentText.value += removeLastPunctuation(text)
  }
}

// 过滤结尾的标点符号
function removeLastPunctuation(str) {
  const punctuationRegex = /[.,;:?!。，；：？！()\[\]{}'"]$/;
  if (punctuationRegex.test(str.charAt(str.length - 1))) {
    return str.slice(0, -1);
  }
  return str;
}

initRecord()

function clear() {
  currentText.value = ''
}
function confirm() {
  emit('getSpeeckInfo', currentText.value)
  clear()
}

</script>

<style scoped lang="scss">
.speech-main {
  .top-title {
    border-bottom: 1px solid #E7E7E7;
    height: 112rpx;
    line-height: 112rpx;
    text-align: center;
    font-size: 32rpx;
  }

  .content {
    padding: 20rpx;
    color: #767676;
  }

  .bottom {
    height: 200rpx;
    display: flex;
    padding: 0 30rpx;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 40rpx;

    .text-btn {
      flex: 1;
      text-align: center;
      line-height: 146rpx;
      font-size: 36rpx;

      &.clear {
        color: #606266;
      }

      &.confirm {
        color: #3375F6;
      }
    }

    .button-view {
      width: 350rpx;
      font-size: 36rpx;
      color: #606266;

      .button {
        margin: 0 auto;
        width: 146rpx;
        height: 146rpx;
        background: url('@/static/image/dailycheck/speeck.png') no-repeat;
        background-size: 100% 100%;
        transition: all .3s linear;
        cursor: pointer;
      }

      .text {
        padding-top: 20rpx;
      }
    }

    .scale {
      cursor: pointer;
      transform: scale(1.3);
    }

  }
}
.info {
  box-sizing: border-box;
  padding: 20px;
}
</style>
